/* 全局重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* 使元素的边距和内边距不影响宽高 */
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4; /* 背景颜色 */
    padding: 20px; /* 页边距 */
}

/* 容器 */
.container {
    display: flex;
    justify-content: space-between; /* 子元素之间的间隔 */
    margin: 20px auto; /* 上下边距 */
    max-width: 1200px; /* 最大宽度 */
    background-color: #fff; /* 背景色 */
    border-radius: 8px; /* 圆角 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 左侧样式 */
.left {
    flex: 1; /* 占据剩余空间 */
    padding: 20px; /* 内边距 */
    border-right: 1px solid #ddd; /* 右边框 */
}

.wrap {
    text-align: center; /* 文本居中 */
}

h3 {
    font-size: 26px; /* 标题大小 */
    color: #333; /* 颜色 */
    margin-bottom: 20px; /* 下边距 */
}

.a-wrap {
    background: rgb(233, 51, 51); /* 按钮背景色 */
    color: #fff; /* 按钮文字颜色 */
    padding: 10px 15px; /* 内边距 */
    border-radius: 5px; /* 圆角 */
    text-decoration: none; /* 去掉下划线 */
    display: inline-block; /* 使按钮呈块级元素 */
    margin-bottom: 20px; /* 下边距 */
}

p {
    margin-bottom: 20px; /* 段落下边距 */
}

.featured-image {
    max-width: 100%; /* 图片自适应宽度 */
    border-radius: 5px; /* 圆角 */
}

/* 右侧样式 */
.right {
    flex: 2; /* 占据更多空间 */
    padding: 20px; /* 内边距 */
}

h2 {
    font-size: 24px; /* 标题大小 */
    color: #333; /* 颜色 */
    margin-bottom: 20px; /* 下边距 */
}

ul {
    list-style: none; /* 去掉默认列表样式 */
    padding: 0; /* 去掉内边距 */
    display: flex; /* 使用flex布局 */
    flex-wrap: wrap; /* 允许换行 */
}

ul li {
    flex: 1 1 calc(33.33% - 20px); /* 三列布局，减去间距 */
    margin: 10px; /* 项目间距 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 5px; /* 圆角 */
    padding: 15px; /* 内边距 */
    background-color: #fff; /* 背景色 */
    transition: box-shadow 0.3s; /* 平滑阴影效果 */
    position: relative; /* 绝对定位用 */
}

ul li:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* 悬停时阴影效果 */
}

.right-li h3 {
    font-size: 20px; /* 条目标题大小 */
    margin-bottom: 10px; /* 下边距 */
}

.right-li p {
    margin-bottom: 10px; /* 段落下边距 */
}

.thumbnail {
    max-width: 100%; /* 自适应宽度 */
    border-radius: 5px; /* 圆角 */
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* 垂直布局 */
    }

    .left, .right {
        width: 100%; /* 占据全宽 */
        border-right: none; /* 移除右边框 */
        margin-bottom: 20px; /* 下边距 */
    }

    ul li {
        flex: 1 1 calc(50% - 20px);
    }} /* 两列布局 */
